﻿@page
@model DotNetStar.TheKing.Web.Pages.Account.LoginModel
@{ 
    ViewBag.Title = "立即登录";
}

<div class="row">
    <div class="col-5  mx-auto border pt-3 pb-3">

        <h3>@ViewBag.Title</h3>
        <ul class="nav nav-tabs  nav-justified mt-4" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="code-tab" data-toggle="tab" href="#code-tab-pane" role="tab" aria-controls="code" aria-selected="true">
                    手机验证码登录
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="password-tab" data-toggle="tab" href="#password-tab-pane" role="tab" aria-controls="password" aria-selected="false">
                    帐号密码登录
                </a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade show active" id="code-tab-pane" role="tabpanel" aria-labelledby="code-tab">

                <div class="form-group mt-4">
                    <input class="form-control form-control-lg" placeholder="手机号码" id="Mobile" v-model="model.mobile" v-on:keyup.enter="submit()" />
                </div>
                <div class="form-group mt-4">
                    <div class="row">
                        <div class="col-6">
                            <input class="form-control form-control-lg" placeholder="验证码" type="text" id="Code" v-model="model.code" v-on:keyup.enter="submit()" />
                        </div>
                        <div class="col-6">

                            <button class="btn btn-primary btn-block btn-lg" onclick="sendCode(this,$('#Mobile'))" formnovalidate type="button">
                                发送验证码
                            </button>
                        </div>
                    </div>
                </div>
                <div class="form-group mt-4">
                    <button class="btn btn-dark btn-block btn-lg" @@click="submit()">登 录</button>
                </div>

            </div>
            <div class="tab-pane fade" id="password-tab-pane" role="tabpanel" aria-labelledby="password-tab">
                <div class="form-group mt-4">
                    <input class="form-control form-control-lg" placeholder="手机号/邮箱/昵称" id="account" v-model="model.account" v-on:keyup.enter="submit()" />
                </div>
                <div class="form-group mt-4">
                    <input class="form-control form-control-lg" placeholder="密码" type="password" id="password" v-model="model.password" v-on:keyup.enter="submit()" />
                </div>
                <div class="form-group mt-4">
                    <button class="btn btn-dark btn-block btn-lg" type="button" @@click="submit()">登 录</button>
                </div>
            </div>
        </div>

        <div class="mt-3 mb-3">
            <div class="float-left">
                <a asp-page="Register">立即注册</a>
            </div>
            <div class="float-right">
                <a asp-page="FindPwd">找回密码</a>
            </div>
        </div>
    </div>
</div>
@section scripts{
    @Html.Partial("../Shared/_ValidationScripts.cshtml")

<script type="text/javascript">
    $('footer').addClass('fixed-bottom');
    let returnUrl = '@Model.ReturnUrl';

    new Vue({
        el: '#code-tab-pane',
        data: {
            model: {
                mobile: null,
                code: null
            }
        },
        methods: {
            submit: function () {
                if (!this.model.mobile) {
                    $.alert( '请输入手机号');
                    return false;
                }

                if (!this.model.code) {
                    $.alert('请输入验证码');
                    return false
                }
                var index = layer.load(2);
                let v = this;
                $.ajax({
                    data: v.model,
                    url: '@Url.Page("Login","MobileCode")',
                    type: 'post',
                    success: function (data) {
                        location.href = returnUrl;
                    },
                    error: function (data) {
                        layer.close(index);
                        $.alert(data.responseText);
                    }
                });
            }
        }
    });
       
    new Vue({
        el: '#password-tab-pane',
        data: {
            model: {
                account: null,
                password: null
            }
        },
        methods: {
            submit: function () {
                if (!this.model.account) {
                    $.alert( '请输入帐号');
                    return false;
                }

                if (!this.model.password) {
                    $.alert('请输入密码');
                    return false
                }
                var index = layer.load(2);
                let v = this;
                $.ajax({
                    data: v.model,
                    url: '@Url.Page("Login", "AccountPassword")',
                    type: 'post',
                    success: function (data) {
                        location.href = returnUrl;
                    },
                    error: function (data) {
                        layer.close(index);
                        $.alert(data.responseText);
                    }
                });
            }
        }
    });
    
</script>
}